<template>
  <div>
    <el-row>
      <el-text tag="b" size="large">基本信息</el-text>
    </el-row>
    <el-row>
      <el-form :inline="true" ref="checkFormRef" :model="checkForm" size="small" :rules="checkFormRules">
        <el-form-item label="检查项名称" prop="name">
          <el-input v-model="checkForm.name"></el-input>
        </el-form-item>
        <el-form-item label="检查项类别" prop="type">
          <el-select v-model="checkForm.type" placeholder="类别选择" style="width: 150px;">
            <el-option value="lude" label="润滑"></el-option>
            <el-option value="check" label="点检"></el-option>
            <el-option value="maintain" label="保养"></el-option>
          </el-select>
        </el-form-item>
        <el-tooltip content="不选择部门，则所有人均可见。" effect="light" placement="top-start">
          <el-form-item label="归属部门" prop="deptId">
            <el-cascader v-model="checkForm.deptId" :options="adminStore.deptList" :props="deptProp"></el-cascader>
          </el-form-item>
        </el-tooltip>
        <el-form-item>
          <el-button type="primary" plain @click="reset">重置</el-button>
          <el-button type="primary" @click="submitForm">提交</el-button>
        </el-form-item>
        <el-form-item v-if="props.edit">
          <el-button type="danger" @click="cancelEdit">取消编辑</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="1.5">
        <el-text tag="b" size="large">项目编辑</el-text>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" size="small" @click="itemVisiable = true">新增项目</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-table :data="checkForm.itemsList">
        <el-table-column align="center" type="index" width="80" label="序号"></el-table-column>
        <el-table-column align="center" label="项目名称" prop="name"></el-table-column>
        <el-table-column align="center" label="项目内容" prop="content"></el-table-column>
        <el-table-column align="center" label="备注" prop="remark"></el-table-column>
        <el-table-column align="center" label="操作" width="100">
          <template #default="{ row }">
            <el-button type="primary" @click="editItem(row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-dialog v-model="itemVisiable" title="项目明细">
      <el-form ref="itemFormRef" label-width="auto" :model="itemData" :rules="itemRules">
        <el-form-item label="项目名称" prop="name">
          <el-input v-model="itemData.name"></el-input>
        </el-form-item>
        <el-form-item label="项目内容" prop="content">
          <el-input v-model="itemData.content" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="itemData.remark" type="textarea"></el-input>
        </el-form-item>

      </el-form>
      <template #footer>
        <el-button type="primary" @click="addToList">确认</el-button>
        <el-button type="primary" plain @click="cancel">取消</el-button>
      </template>
    </el-dialog>
  </div>

</template>
<script setup>
import { useAdminStore } from '@/stores';
import { ref } from 'vue'
import { ElMessage } from 'element-plus';
// 编辑项目组传递属性
const props = defineProps({
  checkData: Object,
  activeName: String,
  edit: {
    type: Boolean,
    default: false
  }
})

// 新增项目组
const adminStore = useAdminStore()
const deptProp = ref({
  value: 'id',
  label: 'name',
  children: 'children',
  emitPath: false
})
const checkForm = ref({
  id: '',
  name: '',
  type: '',
  deptId: '',
  itemsList: []
})
// 待修改的数据
if (props.checkData) {
  checkForm.value = JSON.parse(JSON.stringify(props.checkData))
}


const checkFormRef = ref(null)
const checkFormRules = ref({
  name: [{ required: true, message: '请输入检查项名称', trigger: 'blur' }],
  type: [{ required: true, message: '请选择检查项类别', trigger: 'blur' }],
  deptId: [{ required: false }]
})
function reset() {
  checkFormRef.value.resetFields()
  // checkForm.value.itemsList = []
}
const emit = defineEmits(['editCheck', 'cancelEdit'])
function cancelEdit() {
  emit('cancelEdit')
}
async function submitForm() {
  checkFormRef.value.validate(async (valid) => {
    if (valid && checkForm.value.itemsList.length > 0) {
      emit('EditCheck', checkForm.value)
      reset()
    } else {
      ElMessage.error('请完善信息')
    }
  })
}
// 新增项目组-items
const itemFormRef = ref(null)
const itemVisiable = ref(false)
const itemData = ref({
  name: '',
  content: '',
  remark: ''
})
const itemRules = ref({
  name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
  content: [{ required: true, message: '请输入项目内容', trigger: 'blur' }],
  remark: [{ required: false }]
})
function addToList() {
  itemFormRef.value.validate(valid => {
    if (valid) {
      if (props.activeName === 'new') {
        let item = JSON.stringify(itemData.value)
        checkForm.value.itemsList.push(JSON.parse(item))
        itemFormRef.value.resetFields()
        itemVisiable.value = false
      } else if (props.activeName === 'edit') {
        // checkForm.value.itemsList.find(item => {
        //   item.id === itemData.value.id
        // })
        itemVisiable.value = false
      }

    }
  })
}
function cancel() {
  itemFormRef.value.resetFields()
  itemVisiable.value = false
}
function editItem(row) {
  console.log(row)
  itemData.value = row
  itemVisiable.value = true

}
</script>
<style scoped lang="less">
.el-row {
  margin-top: 20px;
}

.el-dialog {
  .el-form {
    margin: 10px 20px;
  }
}
</style>